<template>
	<view class="userControl">
		<!-- 搜索输入框 -->
		<view class="searchInput">
			<uni-search-bar :radius="100" @input="search"></uni-search-bar>
		</view>
		<uni-table :border="false" stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th width="70">姓名</uni-th>
				<uni-th width="70">部门</uni-th>
				<uni-th width="70">职位</uni-th>
				<uni-th width="100">电话</uni-th>
				<uni-th width="70">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item,index) in userList" :key="index">
				<uni-td>{{item.name}}</uni-td>
				<uni-td>{{item.department}}</uni-td>
				<uni-td>{{item.type}}</uni-td>
				<uni-td>{{item.phone}}</uni-td>
				<uni-td>
					<view class="controlBtn">
						<uni-icons type="compose" size="20" @click="handleEditor(item)" color="#0366d6"></uni-icons>
						<uni-icons type="trash" size="20" @click="handleDelete(item)" color="#ef5656"></uni-icons>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<!-- 分页 -->
		<view class="pagination">
			<uni-pagination :current="page" show-icon="true" :total="total" @change="handlePageChange"></uni-pagination>
		</view>

		<view class="buttonWrap">
			<button type="primary" size="mini" @click="toAddPage">增加人员</button>
		</view>
	</view>
</template>

<script>
	import throttle from "@/utils/throttle.js"
	export default {
		name: "userControl",
		data() {
			return {
				page: 1,
				total: 0,
				keywords: "",
				userList: []
			}
		},
		onShow() {
			this.getUserList()
		},
		methods: {
			async getUserList() {
				try {
					const {
						data
					} = await this.request("getUserList", {
						phone: this.phone,
						page: this.page,
						keywords: this.keywords,
					})

					console.log(data)
					this.userList = data.data
					this.total = data.total
				} catch (e) {
					console.log(e)
				}
			},
			/* 搜索 */
			search: throttle(async function(value) {
				// 搜索初始化页数
				this.page = 1
				this.keywords = value
				this.getUserList()
			}, 300),
			/* 分页 */
			handlePageChange(e) {
				this.page = e.current
				this.getUserList()
			},
			handleEditor(item) {
				uni.navigateTo({
					url: `/pages/userControl/userEditor?user=${JSON.stringify(item)}`
				})
			},
			handleDelete(item) {
				const phone = item.phone
				uni.showModal({
					title: "提示",
					content: "确定删除？",
					success: async (res) => {
						if (res.confirm) {
							try {
								await this.request("userDelete", {
									phone
								})

								this.getUserList()
							} catch (e) {
								console.log(e)
							}
						}
					}
				})
			},
			toAddPage() {
				uni.navigateTo({
					url: "/pages/userControl/addUser"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userControl {
		padding: 30rpx;

		.controlBtn {
			display: flex;
			justify-content: space-between;
		}

		.searchInput {
			margin-bottom: 20rpx;
		}
	}
</style>
